<link rel="stylesheet" href="/static/css/system/systemUser.css"
	type="text/css">
<div class="select-div">
	<div class="layui-inline">
		<label class="layui-form-label">手机号码:</label>
		<div class="layui-input-inline">
			<input type="tel" name="mobile" id="mobile"
				lay-verify="required|phone" autocomplete="off" class="layui-input">
		</div>
	</div>
	<div class="layui-inline">
		<label class="layui-form-label"> 用户登录名:</label>
		<div class="layui-input-inline">
			<input type="tel" name="username" id="username" autocomplete="off"
				class="layui-input">
		</div>
	</div>
    <div class="layui-inline">
        <label class="layui-form-label"> 用户名:</label>
        <div class="layui-input-inline">
            <input type="tel" name="name" id="name" autocomplete="off"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-inline">
        <button class="layui-btn layui-btn-primary margin-left-10" id="reload" >查询</button>
        <button class="layui-btn" id="addUser" >新增</button>
    </div>
</div>
<table id="users" lay-filter="users"></table>
<script>
	$("#reload").on('click',function(){
		//这里以搜索为例
		var table = layui.table;
		table.reload('users', {
		  where: { //设定异步数据接口的额外参数，任意设
              name: $('#name').val(),
              username: $('#username').val(),
              mobile: $('#mobile').val()
		  }
		  ,page: {
		    curr: 1 //重新从第 1 页开始
		  }
		});
	})

	var layerIndex ;
	$('#addUser').on('click',function () {
        var index = layer.open({
            type: 2,
            title: '添加用户',
            area: ['700px', '600px'], //宽高
            fix: false, //不固定
            maxmin: true,
            content: '/systemUser/toPage/system_user_add'
        });
        layerIndex = index;
    });

    layui.use('table', function(){
        var table = layui.table;
        table.render({
            elem: '#users',
            url: '/systemUser/getUserList', //数据接口
            method: 'post',
            page: true, //开启分页
            cols: [[ //表头
                {field: 'id',title: '序号', fixed: 'left',
                	templet: function(d){
                		return '<div>'+d.LAY_INDEX +'</div>';
                	}   
            	}
                ,{field: 'name', title: '名字' }
                ,{field: 'username', title: '用户名'}
                ,{field: 'idCard', title: '身份证'}
                ,{field: 'roleName', title: '角色',
                	templet: function(d){
                		return '<div>'+(d.roleName||'暂无角色')+'</div>';
                	}   
                 }
                ,{field: 'mobile', title: '手机号码'}
                ,{field: 'email', title: '邮箱',}
                ,{field: 'createTime', title: '创建时间',
                    templet: function(d){
                        return new Date(d.createTime).Format('yyyy-MM-dd hh:mm:ss');
                    }
                },
                {field:'right', title: '操作', width:177,toolbar:"#add-role"}
            ]]
        });

        //监听工具条
        table.on('tool(users)', function(obj){
        	var event = obj.event;
            var data = obj.data;
            var oldRoleId = data.roleId;
        	if(event == 'edit-role'){
                layer.open({
                    title: '选择角色' ,
                    area: ['150px', '150px'],
                    content:
                            '<div class="role-select"><select id="role_select_id">'+
                                '<% for(role in roles){ %>'+
                                    '<option value="${role.id}">${role.name}</option>'+
                                '<% } %>'+
                            '</select></div>' ,
                    yes:function () {
                        var selectRoleId =  $("#role_select_id").val();
                        $.ajax({
                            type: "POST",
                            url: "/systemUser/setUserRole",
                            data: {"userId": data.id, "roleId":selectRoleId,"oldRoleId":oldRoleId},
                            success: function (data) {
                                if (data != null && data.code == 200) {
                                    layer.msg(data.msg);
                                    setTimeout(function () {
                                        forwardByUrlAndTitle("/systemUser/index", "用户管理");
                                    }, 1000)
                                } else {
                                    layer.msg(data.msg);
                                }
                            }
                        });
                    }
                });
        	}else if(event == 'delete-role'){
       			layer.confirm('确定删除角色吗?', function(index){
       				$.ajax({
                        type: "POST",
                        url: "/systemUser/deleteUserRole",
                        data: {"userId": data.id, "roleId":oldRoleId},
                        success: function (data) {
                            if (data != null && data.code == 200) {
                            	obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                                layer.msg(data.msg);
                            } else {
                                layer.msg(data.msg);
                            }
                        }
                    });      		    	
      		    });
        	}
        });
    });

</script>
<script type="text/html" id="add-role">
    <a class="layui-btn layui-btn-xs" lay-event="edit-role" >管理角色</a>
	<a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="delete-role" >删除用户</a>
</script>